<template>
    <div>
        <!-- header头部 -->
        <Logo />
        <div class = "contend">
            <!-- Url地址 -->
            <p class = "addressUrl orHeader">
                <span>Url地址：</span>
                <input type="text" v-model = "Generates" id = "ipt" disabled = 'true' style = "width:415px;">
                <span class = "copy" @click = "copy()" v-if = "judgeCopy">复制</span>
            </p>
            <!-- 学校和销售人员填写 -->
            <div class = "essentialInformation">
                <!-- 学校 -->
                <p class = "school orHeader">
                    <span>学校   ：</span>
                    <input type="text" maxlength="20" v-model = "shcoolName" style = "width:240px;">
                </p>
                <!-- 销售人员 -->
                <p class = "sale orHeader">
                    <span>销售人员   ：</span>

                    <el-select v-model="saleId" filterable placeholder="请选择" style = "width:170px;"  @change="getValue">
                        <el-option
                            v-for="(item,index) in salesmans"
                            :key="index"
                            :label="item.sale_user"
                            :value="index"
                        >
                        </el-option>
                    </el-select>
                    <span style = "margin-left: 30px;" v-if = "salePhone != ''" >{{ salePhone }}</span>
                </p>
            </div>
            <!-- 大数据教学平台 -->
            <div class = "teaching-platform platformOr" style = "position:relative;top:15px;">
                <p class = "title">
                    <span class = "category">教学</span>
                    <span class = "addAccount" @click = "teachingAddAccount()">添加账号</span>
                </p>
                <div class = "accountOrRole">
                    <ul>
                        <li v-for = "(item,index) in teachingAddAccounts" :key = "index" style = " width: 560px;">
                            <p class = "accountNumber">
                                <span>账号   ：</span>
                                <input type="text" maxlength="20" v-model = "item.userNum">
                            </p>
                            <p class = "role">
                                <span>角色   ：</span>
                                <el-radio v-model="item.role" label="1">教师</el-radio>
                                <el-radio v-model="item.role" label="2">学生</el-radio>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 大数据实训平台 -->
            <div class = "training-platform platformOr" style = "position:relative;top:30px;">
                <p class = "title">
                    <span class = "category">实训</span>
                    <span class = "addAccount" @click = "trainingAddAccount()">添加账号</span>
                </p>
                <div class = "accountOrRole">
                    <ul>
                        <li v-for = "(item,index) in trainingAddAccounts" :key = "index" style = " width: 560px;">
                            <p class = "accountNumber">
                                <span>账号   ：</span>
                                <input type="text" maxlength="20" v-model = "item.userNum">
                            </p>
                            <p class = "role">
                                <span>角色   ：</span>
                                <el-radio v-model="item.role" label="1">教师</el-radio>
                                <el-radio v-model="item.role" label="2">学生</el-radio>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 大数据科研平台 -->
            <div class = "scientific-research-platform platformOr" style = "position:relative;top:45px;">
                <p class = "title">
                    <span class = "category">科研</span>
                    <span class = "addAccount" @click = "scientificAddAccount()">添加账号</span>
                </p>
                <div class = "accountOrRole">
                    <ul>
                        <li v-for = "(item,index) in scientificAddAccounts" :key = "index" style = " width: 251px;">
                            <p class = "accountNumber">
                                <span>账号   ：</span>
                                <input type="text" maxlength="20" v-model = "item.userNum">
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 数据管理系统 -->
            <div class = "data-management platformOr"  style = "position:relative;top:60px;">
                <p class = "title">
                    <span class = "category">数据</span>
                    <span class = "addAccount" @click = "managementAddAccount()">添加账号</span>
                </p>
                <div class = "accountOrRole Last">
                    <ul>
                        <li v-for = "(item,index) in managementAddAccounts" :key = "index" style = " width: 251px;">
                            <p class = "accountNumber">
                                <span>账号   ：</span>
                                <input type="text" maxlength="20" v-model = "item.userNum">
                            </p>
                        </li>
                    </ul>
                </div>
                <!-- 生成Url -->
                <p class = "Preservation" v-if = "judgeOne" @click = "Generate()">生成Url</p>
                <!-- 保存按钮 -->
                <p class = "Preservation" v-if = "judgeTow" @click = "Preservation()">保存</p>
            </div>
        </div>
    </div>
</template>
<script>
import Logo from "../../components/Logo"
export default {
    components:{
        Logo,
    },
    data () {
        return {
            // 下拉框index的值
            saleId:'',
            // 学校名字
            shcoolName:'',
            // 平台ID
            systemId: '',
            // 传过去选项的ID
            saleIdtow:'',
            salePhone:'',
            // 大数据实训平台添加账号
            teachingAddAccounts:[
                {
                    role:'1',
                    userNum:'',
                }
            ],
            trainingAddAccounts:[
                {
                    role:'1',
                    userNum:'',
                }
            ],
            scientificAddAccounts:[
                {
                    role:'1',
                    userNum:'',
                }
            ],
            managementAddAccounts:[
                {
                    role:'1',
                    userNum:'',
                }
            ],
            // url
            Generates:'',
            // 销售人员信息
            salesmans:"",
            // 判断生成url、保存和复制的显示与隐藏
            judgeOne:true,
            judgeTow:false,
            judgeCopy:false,
        }
    },
    created () {
        this.salesman()
    },
    methods:{
        getValue(key){
            let self = this
            console.log(key)
            self.salePhone = self.salesmans[key].sale_phone
            self.saleIdtow = self.salesmans[key].sale_user
        },
        // 点击复制Url
        copy(){
            this.value = this.Generates
            console.log(this.Generates)
            const input = document.createElement('input');  // 这里的逻辑就是新建立一个input标签，
            document.body.appendChild(input); // 把input添加到body中
            input.setAttribute('value',this.value); // 设置input的value值，this.hd3href
            input.select();  									// select 选中input里面的所有文本内容
            document.execCommand("Copy"); // 执行浏览器复制命令
            this.$message({  								  // 提示消息
                message: "复制成功",
                type: 'success'
            });
            document.body.removeChild(input);   // 最近需要销毁
        },
        // 大数据教学平台添加账号
        teachingAddAccount(){
            let Arr = {
                role:'1',
                userNum:'',
            }
            this.teachingAddAccounts.push(Arr)
        },
        // 大数据实训平台添加账号
        trainingAddAccount(){
            let Arr = {
                role:'1',
                userNum:'',
            }
            this.trainingAddAccounts.push(Arr)
        },
        // 大数据科研平台添加账号
        scientificAddAccount(){
            let Arr = {
                role:'1',
                userNum:'',
            }
            this.scientificAddAccounts.push(Arr)
        },
        // 数据管理系统添加账号
        managementAddAccount(){
            let Arr = {
                role:'1',
                userNum:'',
            }
            this.managementAddAccounts.push(Arr)
        },
        // 点击生成url
        Generate(){
            let self = this
            console.log(1111)
            if(self.shcoolName == ''){
                self.$notify({
                    type: 'danger', message: '请填写学校名称'
                })
                return
            }
            if(self.salePhone == 0){
                self.$notify({
                    type: 'danger', message: '请填写销售人员信息'
                })
                return
            }
            if(self.teachingAddAccounts[0].userNum == '' && self.trainingAddAccounts[0].userNum == '' && self.scientificAddAccounts[0].userNum == '' && self.managementAddAccounts[0].userNum == '' ){
                self.$notify({
                    type: 'danger', message: '请填写至少一项账号信息'
                })
                return
            }
            self.$axios.post('/school/addSchoolInfo',{
                // 学校名称
                schoolName:self.shcoolName,
                systemId:self.systemId,
                saleId:self.saleIdtow,
                // 手机号
                salePhone:self.salePhone,
                // 教学
                systemJx:self.teachingAddAccounts,
                // 实训
                systemSx:self.trainingAddAccounts,
                // 科研
                systemKy:self.scientificAddAccounts,
                // 数据
                systemSj:self.managementAddAccounts,

                stutas:1,
           }).then(response => {
               let res = response.data
               if(res.data.code == 200){
                    $("#ipt").prop("disabled",false);   //可编辑
                    $("#ipt").prop("readonly",'readonly');
                    self.judgeOne = false;
                    self.judgeTow = true;
                    self.judgeCopy = true;
                    self.Generates = res.data.url
                    self.$message({
                        message : '获取URL成功',
                        type : 'success'
                    })
                }else if(res.data.code == 5001){
                    self.$notify({
                        type: 'danger', message: '学校名称重复'
                    })
                }else{
                   self.$message.error(res.message)
                }
            })
        },
        //获取销售人员
        salesman(){
            let self = this
            self.$axios.get('/school/querySaleUser?saleId=' + self.saleId).then(response => {
                let res = response.data
                if(res.code === 200){
                    self.salesmans = res.data
                    console.log(res.data,11111)
                }else{
                    self.$notify({
                        type: 'danger', message: res.message
                    })
                }
            })
        },
        // 录入信息
        Preservation(){
            let self = this
            if(self.shcoolName == ''){
                self.$notify({
                    type: 'danger', message: '请填写学校名称'
                })
                return
            }

            if(self.teachingAddAccounts[0].userNum == '' && self.trainingAddAccounts[0].userNum == '' && self.scientificAddAccounts[0].userNum == '' && self.managementAddAccounts[0].userNum == '' ){
                self.$notify({
                    type: 'danger', message: '请填写至少一项账号信息'
                })
                return
            }
            self.$axios.post('/school/addSchoolInfo',{
                // 学校名称
                schoolName:self.shcoolName,
                systemId:self.systemId,
                saleId:self.saleIdtow,
                // 手机号
                salePhone:self.salePhone,
                // 教学
                systemJx:self.teachingAddAccounts,
                // 实训
                systemSx:self.trainingAddAccounts,
                // 科研
                systemKy:self.scientificAddAccounts,
                // 数据
                systemSj:self.managementAddAccounts,
                stutas:2,
           }).then(response => {
               let res = response.data
               if(res.data.code === 200){
                    self.$message({
                        message : '保存成功',
                        type : 'success'
                    })
                    self.$router.push({
                        path: '/',
                    })
                    // for(var i = 0; i < self.teachingAddAccount.length;i++){
                    //     if(self.teachingAddAccount[i].userNum != ''){
                    //         this.salesmans.push(1)
                    //     }
                    // }
                }else if(res.data.code == 5001){
                    self.$notify({
                        type: 'danger', message: '学校名称重复'
                    })
                }else{
                   self.$message.error(res.message)
                }
            })
        },
    }
}
</script>

<style lang = "scss" scoped>
    .contend{
        width: 1200px;
        position: relative;
        margin: 0 auto;
        color: #333333;
    }
    .addressUrl{
        width: 100%;
        height: 40px;
        margin-top: 30px;
        margin-bottom: 20px;
    }
    .orHeader{
        position: relative;
        margin-left: 33px;
        span{
            font-size:16px;
        }
        .copy{
            font-size: 14px;
            color: #409eff;
            border: 1px solid #b3d8ff;
            background: #ecf5ff;
            border-radius: 5px;
            margin-left: 5px;
            padding: 5px 10px;
            cursor: pointer;
        }
        input{
            margin-left: 5px;
            font-size: 18px;
            position: relative;
            padding: 9px 0px 9px 11px;
            margin-left: 9px;
            border: 1px solid #d7d7d7;
            border-radius: 5px;
            z-index: 10;
            outline:none
        }
        input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
            color: #BDCADA;
        }
        input:-moz-placeholder { /* Mozilla Firefox 4 to 18 适配火狐 */
            color: #BDCADA;
        }
        input::-moz-placeholder { /* Mozilla Firefox 19+ 适配火狐 */
            color: #BDCADA;
        }
        input:-ms-input-placeholder { /* Internet Explorer 10+  适配ie*/
            color: #BDCADA;
        }
        input:focus{
            border-color: #66afe9;
            outline: 0;
        }
    }
    .essentialInformation{
        width: 100%;
        height: 40px;
        position: relative;
        margin-bottom: 28px;
        p{
            float: left;
            position: relative;

        }
        .sale{
            margin-left: 100px;
        }

    }
    .platformOr{
        clear: both;
        .title{
            position: relative;
            margin-left:33px;
            margin-bottom: 27px;
            .category{
                font-size: 18px;
                font-weight: bold;
            }
            .addAccount{
                font-size: 14px;
                color: #409eff;
                border: 1px solid #b3d8ff;
                border-radius: 5px;
                background: #ecf5ff;
                padding: 5px 11.5px;
                margin-left: 25px;
                cursor: pointer;
            }
        }
        .accountOrRole{
            position: relative;
            li{

                height: 40px;
                position: relative;
                margin-left: 33px;
                margin-bottom:27px;
                float: left;
            }
            .accountNumber{
                float: left;
                input{
                    width: 160px;
                    font-size: 18px;
                    position: relative;
                    padding: 9px 0px 9px 11px;
                    border: 1px solid #d7d7d7;
                    margin-left: 9px;
                    border-radius: 5px;
                    z-index: 10;
                    outline:none
                }
                input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
                    color: #BDCADA;
                }
                input:-moz-placeholder { /* Mozilla Firefox 4 to 18 适配火狐 */
                    color: #BDCADA;
                }
                input::-moz-placeholder { /* Mozilla Firefox 19+ 适配火狐 */
                    color: #BDCADA;
                }
                input:-ms-input-placeholder { /* Internet Explorer 10+  适配ie*/
                    color: #BDCADA;
                }
                input:focus{
                    border-color: #66afe9;
                    outline: 0;
                }
            }
            .role{
                position: relative;
                margin-left: 30px;
                float: left;
                line-height: 40px;
            }
        }
        .Last{
            p:last-child{
                position:relative;
                margin-bottom: 100px;
            }
        }
    }
    .Preservation{
        width: 150px;
        height: 40px;
        color: #fff;
        background: #387ee8;
        clear: both;
        position: relative;
        margin: 100px auto;
        top: 20px;
        text-align: center;
        line-height: 40px;
        border-radius: 10px;
        cursor: pointer;
        &:hover{
            background: #0161f1;
        }
    }
</style>
<style lang="scss">
    // 角色选项样式
    .accountOrRole{
        .el-radio__inner{
            border: 1px solid #333333;
        }
        .el-radio__label{
            font-size: 16px;
            position: relative;
            top: 1px;
        }
    }
    // 销售人员选项
    .orHeader{
        .el-input--suffix .el-input__inner{
            margin-left: 9px;
        }
    }
</style>
